<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05_元素显示模式</title>
    <style>
      /* 1.块级元素：可以自定义宽高，元素竖着排
       div：默认高度为0，宽度为父级宽度的100%*/
      div{
          width: 100px;
          height: 100px;
          border: 5px solid #0f0;
          display: block;
      }
      /*行内元素：无法设置宽高，可以与其他元素共处一行，元素横着排，大小是靠内容撑开的*/
      span{
          background-color: orange;
          width: 200px;
          height: 200px;
          display: inline;
          display: block;
      }
      /*   行内块元素：既能设置宽高，又横着排*/
      input,button{
          width: 200px;
          height: 200px;
          display: inline-block;
      }
      .d2{
          /*元素消失且释放自己的占据的页面空间*/
          display: none;
      }
    </style>
</head>
<body>
    <div class="d1">111</div>
    <div class="d2">222</div>
    <div class="d3">333</div>
    <hr>
    <span>123456789</span>
    <span>123456789</span>
    <span>123456789</span>
    <hr>
    <input type="text">
    <input type="text">
    <button>按钮</button>
</body>
</html>